<template>
  <div class="mainox">
    <div class="leftbox">
      <div class="leftTopBox">
        <div class="leftTopBoxTitle">
          <h2 class="animate__animated animate__zoomInLeft">词条管理</h2>
        </div>
        <el-divider content-position="left">词条录入</el-divider>
        <el-row>
          <el-button type="primary" @click="oneInsert = true">单条录入</el-button>
          <el-button type="primary" @click="moreInsert = true">批量录入</el-button>
        </el-row>
        <el-divider content-position="left">词条查询</el-divider>
        <el-button type="primary" @click="searchTagsVisible = true">词条查询</el-button>
        <el-dialog title="单条录入" :append-to-body="true" :visible.sync="oneInsert" :destroy-on-close="true" width="400px">
          <el-form :inline="true" :rules="rule" :model="addTagDto" class="demo-form-inline" label-width="100px">
            <el-form-item label="名字" prop="tagName">
              <el-input v-model="addTagDto.tagName" placeholder="词条名字"></el-input>
            </el-form-item>
            <el-form-item label="类型" prop="tagType">
              <el-select v-model="addTagDto.tagType" placeholder="词条种类">
                <el-option label="基本信息" value="0"></el-option>
                <el-option label="业务属性" value="1"></el-option>
                <el-option label="诊疗属性" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="过期时间">
              <el-input v-model="addTagDto.expired" placeholder="若无过期时间，则为空"></el-input>
            </el-form-item>
          </el-form>

          <span slot="footer" class="dialog-footer">
            <el-button @click="oneInsert = false">取 消</el-button>
            <el-button type="primary" @click="onSubmit">录 入</el-button>
          </span>
        </el-dialog>
        <el-dialog title="批量录入" :append-to-body="true" :visible.sync="moreInsert" :destroy-on-close="true"
          width="600px">
          <el-divider content-position="left"></el-divider>
          <el-form :model="insertMore" class="demo-ruleForm">
            <el-form-item>
              <el-input type="textarea" :autosize="{ minRows: 20, maxRows: 20 }" v-model="insertMore.tags" placeholder="批量录入格式要求：
                词条 类型 过期时间
                A病   2     -1
                男性  0     -1
                （同一行内，一个空格隔开，不同行间，回车隔开。）
                （类型中0：基本信息 1：业务属性 2：诊疗属性）
                （过期时间单位为天，没有过期时间则为-1）"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="moreInsert = false">取 消</el-button>
            <el-popover placement="top" width="160" v-model="visible">
              <p>请仔细确认格式无误在录入</p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="visible=false" >取消</el-button>
                <el-button type="primary" size="mini" @click="insertmore">已确认</el-button>
              </div>
              <el-button type="primary" slot="reference">录入</el-button>
            </el-popover>
          </span>
        </el-dialog>
        <el-dialog title="词条查询(只显示前20条)" :append-to-body="true" :visible.sync="searchTagsVisible"
          :before-close="clearSearchForm" width="900px">
          <el-form :inline="true" :rules="searchRule" :model="searchTags" ref="searchTags" class="demo-form-inline"
            style="margin-left: 60px">
            <i class="el-icon-chat-dot-square" style="margin-top: 15px"></i>
            <el-form-item label="词条名称" prop="tagName">
              <el-input type="text" aria-autocomplete="false" v-model="searchTags.tagName" placeholder="请输入词条名称">
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
              </el-input>
            </el-form-item>
            <el-form-item label="词条类型">
              <el-select v-model="searchTags.tagType" placeholder="请选择词条类型">
                <el-option label="基本信息" value="0"></el-option>
                <el-option label="业务属性" value="1"></el-option>
                <el-option label="诊疗属性" value="2" selected></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" class="submitBox" @click="searchTag" circle></el-button>
            </el-form-item>
          </el-form>
          <el-table :data="searchData" style="width: 870px" height="400px">
            <el-table-column label="词条编号" width="220">
              <template slot-scope="scope">
                <i class="el-icon-link"></i>
                <span style="margin-left: 10px">{{ scope.row.tagId }}</span>
              </template>
            </el-table-column>
            <el-table-column label="词条名称" width="250">
              <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                  <p>词条名称: {{ scope.row.tagName }}</p>
                  <p>过期时间/天: {{ scope.row.defaultExpired }}</p>
                  <div slot="reference" class="name-wrapper">
                    <el-tag type="success" size="medium">{{
                      scope.row.tagName
                    }}</el-tag>
                  </div>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column label="过期时间/天" width="200">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.defaultExpired }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template>
                <el-button type="warning" round size="mini">编辑</el-button>
                <el-button size="mini" type="danger">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <span slot="footer" class="dialog-footer">
            <el-button @click="clearSearchForm">取 消</el-button>
          </span>
        </el-dialog>
      </div>
      <div class="littleCard">
        <div class="IconBox01"></div>
        <div class="IconBox03"></div>
        <div class="IconBox02"></div>

        <div class="IconBox04"></div>
      </div>
      <div class="leftBottomBox">
        <div class="leftBottomBoxTitle">
          <h2 class="animate__animated animate__slideInUp">词库选择</h2>
        </div>
        <br />

        <div class="bottom1">
          <el-divider content-position="left">基本信息</el-divider>
          <el-button style="margin-left: 13px" type="success" @click="infoBoxVisible">基本信息库</el-button>
        </div>
        <div class="bottom2">
          <el-divider>业务属性</el-divider>
          <el-button type="success" @click="serviceBoxVisible">业务属性库</el-button>
        </div>
        <div class="bottom3">
          <el-divider content-position="right">诊疗属性</el-divider>
          <el-button style="margin-right: 12px" type="success" @click="treatmentBoxVisible">诊疗属性库</el-button>
        </div>
      </div>
    </div>
    <div class="iconBox">
      <div class="iconBox1"></div>
      <div class="iconBox2"></div>
      <div class="iconBox3"></div>
      <div class="iconBox4"></div>
      <div class="iconBox5"></div>
      <div class="iconBox6"></div>
      <div class="iconBox7"></div>
      <div class="iconBox8"></div>
      <div class="iconBox9"></div>
    </div>
    <div class="rightbox">
      <div class="rightBoxTitle">
        <h2 class="animate__animated animate__zoomInLeft">词 库</h2>
      </div>
      <div v-if="infoVisible" class="inofBox">
        <div class="infoBoxTitle">
          <h1 class="animate__animated animate__jackInTheBox">
            基 本 信 息 库
          </h1>
        </div>
        <el-table :data="infoData" style="width: 870px" height="550px">
          <el-table-column label="词条编号" width="220">
            <template slot-scope="scope">
              <i class="el-icon-link"></i>
              <span style="margin-left: 10px">{{ scope.row.tagId }}</span>
            </template>
          </el-table-column>
          <el-table-column label="词条名称" width="250">
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top">
                <p>词条名称: {{ scope.row.tagName }}</p>
                <p>过期时间/天: {{ scope.row.defaultExpired }}</p>
                <div slot="reference" class="name-wrapper">
                  <el-tag type="info" size="medium">{{
                    scope.row.tagName
                  }}</el-tag>
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="过期时间/天" width="200">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{
                scope.row.defaultExpired
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template>
              <el-button type="warning" round size="mini">编辑</el-button>
              <el-button size="mini" type="danger">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div v-if="serviceVisible" class="serviceBox">
        <div class="infoBoxTitle">
          <h1 class="animate__animated animate__jackInTheBox">
            业 务 属 性 库
          </h1>
        </div>
        <el-table :data="serviceData" style="width: 870px" height="579px">
          <el-table-column label="词条编号" width="220">
            <template slot-scope="scope">
              <i class="el-icon-link"></i>
              <span style="margin-left: 10px">{{ scope.row.tagId }}</span>
            </template>
          </el-table-column>
          <el-table-column label="词条名称" width="250">
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top">
                <p>词条名称: {{ scope.row.tagName }}</p>
                <p>过期时间/天: {{ scope.row.defaultExpired }}</p>
                <div slot="reference" class="name-wrapper">
                  <el-tag type="success" size="medium">{{
                    scope.row.tagName
                  }}</el-tag>
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="过期时间/天" width="200">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{
                scope.row.defaultExpired
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template>
              <el-button type="warning" round size="mini">编辑</el-button>
              <el-button size="mini" type="danger">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination class="pageBox" background layout="prev, pager, next" :total="serviceTotal"
          :current-page="currentPage" @size-change="handleSizeChange" @current-change="handleCurrentChangeService">
        </el-pagination>
      </div>
      <div v-if="treatmentVisible" class="treatmentBox">
        <div class="infoBoxTitle">
          <h1 class="animate__animated animate__jackInTheBox">
            诊 疗 属 性 库
          </h1>
        </div>
        <el-table :data="treatmentData" style="width: 870px" height="579px">
          <el-table-column label="词条编号" width="220">
            <template slot-scope="scope">
              <i class="el-icon-link"></i>
              <span style="margin-left: 10px">{{ scope.row.tagId }}</span>
            </template>
          </el-table-column>
          <el-table-column label="词条名称" width="250">
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top">
                <p>词条名称: {{ scope.row.tagName }}</p>
                <p>过期时间/天: {{ scope.row.defaultExpired }}</p>
                <div slot="reference" class="name-wrapper">
                  <el-tag size="medium">{{ scope.row.tagName }}</el-tag>
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="过期时间/天" width="200">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{
                scope.row.defaultExpired
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template>
              <el-button type="warning" round size="mini">编辑</el-button>
              <el-button size="mini" type="danger">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination class="pageBox" background layout="prev, pager, next" :total="treatmentTotal"
          :current-page="currentPage" @size-change="handleSizeChange" @current-change="handleCurrentChangeTreatment">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "DictionaryManager",
    data() {
      return {
        visible: false,
        infoVisible: false, //基本信息库的显示
        serviceVisible: false, //业务属性库的显示
        treatmentVisible: false, //诊疗属性库的显示
        oneInsert: false, //单条录入对话框的显示
        moreInsert: false, //批量录入对话框的显示
        searchTagsVisible: false, //词条查询对话框的显示

        flag: 0, //批量录入逻辑的flag

        Treatmentpage: 0, //诊疗属性的page
        Treatmentsize: 100, //诊疗属性的size
        treatmentTotal: 0, //计算出诊疗属性词条的总数
        infoTotal: 0, //计算出基本信息词条的总数
        Servicepage: 0, //业务属性的page
        Servicesize: 100, //业务属性的size
        serviceTotal: 0, //计算出业务属性词条的总数

        addTagDto: { //单条录入传给后端的对象
          tagName: "",
          tagType: "",
          expired: "",
        },
        insertMore: { //批量录入表单输入的内容
          tags: "",
        },
        searchTags: { //词条查询表单输入的内容
          tagName: "",
          tagType: "2",
        },
        listTagDto: [],
        oneTag: { //批量录入传给后端的对象
          tagName: "",
          tagType: "",
          expired: "",
        },

        rule: { //单条录入表单规则验证
          tagName: [{
            required: true,
            message: "请输入名字",
            trigger: "blur"
          }],
          tagType: [{
            required: true,
            message: "请选择类型",
            trigger: "blur"
          }],
        },
        searchRule: { //查询词条表单规则验证
          tagName: [{
              required: true,
              message: "请输入名字",
              trigger: "blur"
            },
            {
              pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+$/,
              message: "不允许输入空格等特殊符号",
              trigger: "blur",
            },
          ],
        },

        currentPage: 1, //初始页
        pageSize: 10, //    每页的数据
        total: 1,

        searchData: [], //词条查询返回的集合
        tagDtoFront: { //查询（前端的数据）
          delFlag: 0,
          page: 0,
          size: 20,
          tagId: "",
          tagName: "",
          tagType: 0,
        },
        tagDto: { //分页查询传给后端的对象
          delFlag: 0,
          page: 0,
          size: 10,
          tagId: "",
          tagName: "",
          tagType: 0,
        },

        infoData: [], //基本信息库信息
        serviceData: [], //业务属性库内容
        treatmentData: [], //诊疗属性库内容
      };
    },
    methods: {
      //共用的SizeChange
      handleSizeChange(pageSize) {
        this.pageSize = pageSize;
        // 点击每页显示的条数时，显示第一页
      },
      //诊疗属性库的显示与关闭
      treatmentBoxVisible() {
        const _this = this;
        _this.infoVisible = false;
        _this.serviceVisible = false;
        _this.showTreatmentData(0, 10);
        _this.treatmentVisible = !_this.treatmentVisible;
      },
      //诊疗属性CurrentChange
      handleCurrentChangeTreatment(currentPage) {
        const _this = this;
        _this.currentPage = currentPage;
        _this.tagDto.page = currentPage * 10 - 10;
        _this.tagDto.size = 10;
        _this.showTreatmentData(_this.tagDto.page, _this.tagDto.size);
      },
      //诊疗属性词库获取数据
      showTreatmentData(page, size) {
        var _this = this;
        _this.tagDto.tagType = 2;
        _this.tagDto.page = page;
        _this.tagDto.size = size;
        _this.postRequest("/tag/list", _this.tagDto).then((res) => {
          if (res.data.code == 200) {
            _this.treatmentData = res.data.data;
          }
        });
      },

      //计算treatment的总条数
      countTreatment() {
        var _this = this;
        _this.tagDto.tagType = 2;
        _this.tagDto.page = _this.Treatmentpage;
        _this.tagDto.size = _this.Treatmentsize;
        _this.postRequest("/tag/list", _this.tagDto).then((res) => {
          if (res.data.data.length != 0) {
            _this.treatmentTotal += res.data.data.length;
            _this.Treatmentpage = _this.Treatmentpage + 100;
            _this.countTreatment();
          } else {
            _this.Treatmentpage = 0;
            _this.Treatmentsize = 100;
          }
        });
      },

      //业务属性库的显示与关闭
      serviceBoxVisible() {
        const _this = this;
        _this.infoVisible = false;
        _this.treatmentVisible = false;
        _this.showServiceData(0, 10);
        _this.serviceVisible = !_this.serviceVisible;
      },

      //业务属性CurrentChange
      handleCurrentChangeService(currentPage) {
        const _this = this;
        _this.currentPage = currentPage;
        _this.tagDto.page = currentPage * 10 - 10;
        _this.tagDto.size = 10;
        _this.showServiceData(_this.tagDto.page, _this.tagDto.size);
      },
      //业务属性词库获取数据
      showServiceData(page, size) {
        var _this = this;
        _this.tagDto.tagType = 1;
        _this.tagDto.page = page;
        _this.tagDto.size = size;
        _this.postRequest("/tag/list", _this.tagDto).then((res) => {
          if (res.data.code == 200) {
            _this.serviceData = res.data.data;
          }
        });
      },
      //计算service的总条数
      countService() {
        var _this = this;
        _this.tagDto.tagType = 1;
        _this.tagDto.page = _this.Servicepage;
        _this.tagDto.size = _this.Servicesize;
        _this.postRequest("/tag/list", _this.tagDto).then((res) => {
          if (res.data.data.length != 0) {
            _this.serviceTotal += res.data.data.length;
            _this.Servicepage = _this.Servicepage + 100;
            _this.countService();
          } else {
            _this.Servicepage = 0;
            _this.Servicesize = 100;
          }
        });
      },

      //基本信息库的显示与关闭
      infoBoxVisible() {
        const _this = this;
        _this.serviceVisible = false;
        _this.treatmentVisible = false;
        _this.showInfoData(0, 6);
        _this.infoVisible = !_this.infoVisible;
      },
      //基本信息词库获取数据
      showInfoData(page, size) {
        var _this = this;
        _this.tagDto.tagType = 0;
        _this.tagDto.page = page;
        _this.tagDto.size = size;
        _this.postRequest("/tag/list", _this.tagDto).then((res) => {
          if (res.data.code == 200) {
            _this.total = _this.infoTotal;
            _this.infoData = res.data.data;
          }
        });
      },

      //批量录入方法
      insertmore() {
        var onetag = this.insertMore.tags;
        const _this = this;
        onetag = onetag.split("\n");
        console.log("一共有" + onetag.length + "条数据");
        console.log("=====================准备插入=========================");
        var onetag1 = onetag[this.flag].split(" ");
        this.oneTag.tagName = onetag1[0];
        this.oneTag.tagType = onetag1[1];
        this.oneTag.expired = onetag1[2];
        _this.postRequest("/tag/insert", this.oneTag).then((res) => {
          console.log("录入第" + _this.flag + "条数据");
          _this.flag++;
          if (_this.flag < onetag.length) {
            _this.insertmore();
          } else {
            _this.flag = 0;
            this.insertMore.tags = "";
            this.moreInsert = false;
          }
        });
      },
      //单条录入方法
      onSubmit() {
        let t_n = this.addTagDto.tagName.replace(/\s*/g, "");
        let t_e = this.addTagDto.expired.replace(/\s*/g, "");
        if (t_n.length == 0 || this.addTagDto.tagName.length == 0) {
          this.$message.error("信息不能为空！");
        } else {
          if (t_e.length == 0) {
            this.addTagDto.expired = "-1";
          }
          // return;
          _this.postRequest("/tag/insert", this.addTagDto).then((res) => {
            if (res.data.code == 200) {
              this.$message({
                message: "录入成功",
                type: "success",
              });
              this.oneInsert = false;
              this.addTagDto = {};
            } else {
              this.$message.error("录入失败！");
            }
          });
        }
      },

      //查询词条的方法
      searchTag() {
        const _this = this;
        this.$refs.searchTags.validate((valid) => {
          if (valid) {
            _this.tagDtoFront.tagName = _this.searchTags.tagName;
            _this.postRequest("/tag/list", _this.tagDtoFront).then((res) => {
              if (res.data.code == 200) {
                _this.searchData = res.data.data;
              }
            });
          } else {
            _this.$message.error("请输入正确格式的词条名字！");
            return false;
          }
        });
      },

      //清空查询词条对话框内容
      clearSearchForm() {
        const _this = this;
        _this.searchTagsVisible = false;
        _this.searchData = [];
        _this.tagDtoFront = {};
        _this.searchTags = {};
      }
    },
    created() {
      this.countService();
      this.countTreatment();
    },
  };
</script>

<style lang="css" scoped>
  @import '../assets/css/dictionarymanage.css';
</style>
